<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
    <style>
        #instance-Snow .demo {
            background-color: #333;
        }
    </style>
</head>
<body>
    <div id="root"></div>
    <script src="../dist/jparticles.all.js"></script>
    <script>
        var names = ['Particle', 'Wave', 'Snow'];
        var options = [{num: 100}];

        var html = [];
        for (var i = 0; i < names.length; i++) {
            html.push(
                '<div id="instance-'+ names[i] +'">' +
                    '<div class="demo"></div>' +
                    '<div class="btn-box">' +
                        '<button id="open'+ i +'" class="btn btn-primary" type="button">' +
                            'open' +
                        '</button>' +
                        '<button id="pause'+ i +'" class="btn btn-danger" type="button">' +
                            'pause' +
                        '</button>' +
                    '</div>' +
                '</div>'
            )
        }

        document.getElementById('root').innerHTML = html.join('');

        for (var i = 0; i < names.length; i++) {
            window['demo'+names[i]] = new JParticles[names[i]]('#instance-' + names[i] + ' .demo', options[i]);

            document.getElementById('open'+i).onclick = function (i) {
                return function () {
                    window['demo'+names[i]].open();
                };
            }(i);

            document.getElementById('pause'+i).onclick = function (i) {
                return function () {
                    window['demo'+names[i]].pause();
                };
            }(i);
        }

        window.demoWave.setOptions({
            offsetTop: 10,
            opacity: 0.5,
            speed: undefined
        });
    </script>
</body>
</html>
